<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排行榜</title>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/element.js"></script>
		<script src="../../../js/axios.min.js"></script>
		<link rel="stylesheet" href="../../../css/element.css">
		<link rel="stylesheet" href="../../../fonts/iconfont/iconfont.css">
		<link rel="stylesheet" href="../../../css/menus/find/top.css">
	</head>
	<body>
		<div id="app">
			<div class="main">
				<!-- 排行榜列表 -->
				<div class="albumList">
					<div class="album">
						<h3>飙升榜</h3>
						<div class="albumImg" >
							<img :src="soarSongList[0].songImg"
								alt="" >
							<div class="mask" @mouseover="mouseOver(0)" @mouseleave="mouseLeave(0)" @click="mouseClick(0)">
								<h1>飙升榜</h1>
							</div>
						</div>
					</div>
					<div class="album">
						<h3>热歌榜</h3>
						<div class="albumImg" >
							<img :src="hotSongList[0].songImg"
								alt="" >
							<div class="mask" @mouseover="mouseOver(1)" @mouseleave="mouseLeave(1)" @click="mouseClick(1)">
								<h1>热歌榜</h1>
							</div>
						</div>
					</div>
					<div class="album">
						<h3>新歌榜</h3>
						<div class="albumImg" >
							<img :src="newSongList[0].songImg"
								alt="" >
							<div class="mask" @mouseover="mouseOver(2)" @mouseleave="mouseLeave(2)" @click="mouseClick(2)">
								<h1>新歌榜</h1>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					// albumList: '', //专辑信息
					soarSongList: '',
					hotSongList: '',
					newSongList: '',
				}
			},
			mounted() { // 生命周期函数
				this.getSoar(),
				this.getHot(),
				this.getNew()
			},
			methods: {
				// 鼠标移入，图片上移
				mouseOver(index){
					console.log('鼠标移入')
					const imgDocument = document.querySelectorAll('.albumImg img')
					imgDocument[index].style.transform = 'translateY(-10px)'
				},
				// 鼠标移出，图片下移
				mouseLeave(index){
					console.log('鼠标移出')
					const imgDocument = document.querySelectorAll('.albumImg img')
					imgDocument[index].style.transform = 'translateY(0px)'
				},
				// 鼠标点击
				mouseClick(id){
					console.log(id)
					const fatherHtml =  window.parent.document.querySelector("#indexIframe")
					fatherHtml.setAttribute('src', 'top/top.html?id='+id)
				},
				// 飙升榜
				getSoar(){
					axios({
						method: 'get',
						url: 'http://localhost:8160/top/soarList/',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.soarSongList = res.data.data.songList
						    console.log(this.soarSongList)
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				getHot(){
					axios({
						method: 'get',
						url: 'http://localhost:8160/top/hotList/',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.hotSongList = res.data.data.songList
							
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},
				getNew(){
					axios({
						method: 'get',
						url: 'http://localhost:8160/top/newList/',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.newSongList = res.data.data.songList
						} else { //登陆失败
							this.$message.error(res.data.message)
						}
					})
				},// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
			},
		})
	</script>
</html>